<script lang="ts" setup>
import { ref } from 'vue';

const isShow=ref(false)

const toggleShow=()=>{
    isShow.value=!isShow.value
}
</script>
<template>
<button @click="toggleShow()">开关</button>
<!-- 频繁显示或隐藏，比如下拉刷新 -->
<div class="box" v-show="isShow">v-show渲染的盒子</div>
<!-- 性能好，不频繁切换软件，初始可为false，比如表达认真（问灵马：应用场景） -->
<div class="box" v-if="isShow">v-if渲染的盒子</div>
</template>
<style scoped>
.box{
    width: 200px;
    height: 200px;
    background-color: gold;
    margin: 5vw;
}</style>

